<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner" style="display: flex; flex-direction: column; flex: 1">
      <div class="main">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="switchTab">
          <el-tab-pane label="客户设置" name="set">
            <SetCard ref="setCard" :active_name="String(activeName)" />
          </el-tab-pane>
          <el-tab-pane label="客户级别" name="level">
            <LevelCard ref="levelCard" :active_name="String(activeName)" />
          </el-tab-pane>
          <el-tab-pane label="客户分类" name="type">
            <TypeCard ref="typeCard" :active_name="String(activeName)" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import SetCard from './components/SetCard/index.vue'
  import LevelCard from './components/LevelCard/index.vue'
  import TypeCard from './components/TypeCard/index.vue'
  import { ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import { useRoute } from 'vue-router'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.customerSet,
  })

  const route = useRoute()
  const activeName = route.query.active == undefined ? 'set' : route.query.active

  const setCard = ref<InstanceType<typeof SetCard> | null>(null)
  const levelCard = ref<InstanceType<typeof LevelCard> | null>(null)
  const typeCard = ref<InstanceType<typeof TypeCard> | null>(null)

  // 导航切换
  const switchTab = (tab: TabsPaneContext) => {
    switch (tab.props.name) {
      case 'set':
        setCard.value.getSet()
        break
      case 'level':
        levelCard.value.getLevelData()
        break
      case 'type':
        typeCard.value.getTypeData()
        break
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
